发布：2017-08-29 10:32:40来源：wendy阅读：268

　　微信小程序flex布局其实是小程序页面的布局方式，采用这种布局方式，可以让小程序页面更加美观，用户的使用体验更好。那么微信小程序flex布局到底有什么特点呢?有些什么资料是需要了解的?如果大家能够获取到相关资料，那么不管是对于开发小程序页面还是实现小程序页面布局的更多方式，都是大有好处的。以下是相关资料，希望大家认真阅读，并获取自己想要的内容。

　　Flex布局其实是微信官方在之前提出的一种新的关于小程序页面的方案，可以完整地的实现小程序各种简便的页面布局。

　　Flex布局提供了小程序元素的对齐方向以及对齐顺序，甚至他们可以是动态的或者不确定的大小的。

　　Flex布局的主要特征是能够调整小程序页面在不同的屏幕（手机屏幕或者电脑屏幕）中能够用最适合的方法填充空间。

　　微信小程序flex布局的特点:

　　任意方向的伸缩，向左，向右，向下，向上

　　在样式层可以调换和重排顺序

　　主轴和侧轴方便配置

　　子元素的空间拉伸和填充

　　沿着容器对齐

　　微信小程序实现了Flex布局,简单介绍下Flex布局在微信小程序中的使用。

　　伸缩容器

　　设有display:flex或者display:block的元素就是一个flex container(伸缩容器)，里面的子元素称为flex item(伸缩项目)，flex container中子元素都是使用Flex布局排版。

　　display:block 指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:block。

　　display:flex:指定为行内容器模式，在一行内显示子元素，可以使用flex-wrap属性指定其是否换行，flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)

　　使用display:block(默认值)的代码:

　　微信小程序flex布局显示效果:

　　微信小程序flex布局的主轴和侧轴：

　　Flex布局的伸缩容器可以使用任何方向进行布局。

　　容器一直以来默认的都有两个轴：也就是小程序主轴(main axis)和小程序侧轴(cross axis)。

　　从开始位置和结束位置来说，开始位置可以称为主轴起点(main start)，结束位置则称作是主轴终点(main end)。

　　同理，还有侧轴起点(cross start),侧轴终点(cross end)以及侧轴长度(cross size)。详情见下图:

　　注意，主轴并不是一定是从左到右的，同理侧轴也不一定是从上到下，主轴的方向使用flex-direction属性控制,它有4个可选值:

　　row :从左到右的水平方向为主轴

　　row-reverse：从右到左的水平方向为主轴

　　column:从上到下的垂直方向为主轴

　　column-reverse从下到上的垂直方向为主轴

　　以上就是关于微信小程序flex布局的全部内容了，微信小程序flex布局的特点以及主轴和侧轴，都在文中做了具体的介绍，希望大家看完以后能够完全了解微信小程序flex布局，从而更好地使用它。更多使用的资料请关注微信小程序商店。

　　微信小程序table布局怎么开发?

　　微信小程序页面排版怎么布局?

　　微信小程序卡片布局怎么做?